<%@ page contentType="text/html;charset=UTF-8" language="java" isErrorPage="true" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="${pageContext.request.contextPath}/css/notes/travel_notes.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js"></script>
    <title>Title</title>
</head>
<body>
<!--===============1,导航界面==================-->
<c:import url="/header/header.jsp"/>
 <div class="main">
    <div class="main-header" style="height: 574.333px;">
        <div class="main-img">
            <img src="${response.data.travelNotesMainImg}">
        </div>
        <div class="main-tittle">
            <div class="tittle">
                <h1>${response.data.travelNotesTitle}</h1>
            </div>
        </div>
    </div>
    <div class="main-usr">
        <div class="p-center">
            <div class="person">
                <a class="touxiang">
                    <img width="120px" height="120px"
                         src="${cust.custProfile}">
                </a>
                <strong>
                    <a class="per_name">${cust.custNickname}</a>
                </strong>
                <div class="p-time">
                    <span class="time">
                        <fmt:formatDate type="both"
                                        dateStyle="medium" timeStyle="medium"
                                        value="${response.data.travelNotesDate}"/>

                    </span>
                </div>
                <div class="sales-collection">
                    <a class="collection">
                        <i></i>
                        <span class="isCollection">收藏</span>
                    </a>
                </div>
            </div>
        </div>
        <script>
            var custId = '${loginCustomer.custId}';
            console.log("用户Id："+custId)
            var url = "${pageContext.request.contextPath}/collection/isNotesCollection";
            $.get(
                url,
                {"custId":custId},
                function (result){
                    console.log(result);
                    if(result.data!==null){
                        for (let i = 0; i < result.data.length; i++) {
                            if(result.data[i]===${response.data.travelNotesId}){
                                $(".isCollection").text("已收藏");
                                break;
                            }
                        }
                    }
                },
                "json"
            )
            $(".collection").click(function (){
                if($(".isCollection").text()==="收藏" && custId!==''){
                    var url = "${pageContext.request.contextPath}/collection/addNotesCollection";
                    $.post(
                        url,
                        {
                            "custId":custId,
                            "notesId":${response.data.travelNotesId}
                        },
                        function (result){
                            $(".isCollection").text("已收藏");
                            alert("收藏成功")
                        }
                    )
                }else if(custId!==''){
                    alert("已收藏！")
                }else {
                    alert("请先登录！")
                }
            })
        </script>
    </div>
    <div class="content" style="position: relative">
        <div class="left-info">
            <div class="left-top">
                <div class="left-top-info">
                    <ul>
                        <li class="start-time">
                            出发时间/
                            <span>
                                 <fmt:formatDate type="date"
                                                 value="${response.data.travelNotesStartdate}"/>

                            </span>
                        </li>
                        <li class="days">
                            出行天数/
                            <span>${response.data.travelNotesTotaldays}</span>天
                        </li>
                    </ul>
                </div>
            </div>
            <div class="left-main">
                ${text}
            </div>
            <div class="left-review">
                <c:forEach var="a" items="${listVo}">
                    <div class="review-item">
                        <div class="review-usr">
                            <div class="usr-ph">
                                <a>
                                    <img height="48px" width="48px"
                                         src="${a.customer.custProfile}">
                                </a>
                            </div>
                            <div class="usr-name">
                                <a class="name">${a.customer.custNickname}</a>
                            </div>
                        </div>
                        <div class="review-text">
                            <div class="re-text">
                                <div class="text">
                                    <p class="re-content">${a.notesReview.notesReviewContent}</p>
                                </div>
                            </div>
                        </div>
                        <div class="review-info">
                            <div class="re-time">${a.notesReview.notesReviewTime}</div>
                        </div>
                    </div>
                </c:forEach>

            </div>
            <div class="pinglun">
                <div class="pinglun-text">
                    <textarea class="text-area" name="review-content" cols="30" rows="10" placeholder="快来评论一下吧！"></textarea>
                </div>
                <div class="pinglun-go">
                    <a role="button" class="submit-review" title="发表评论">发表评论</a>
                </div>
            </div>
        </div>
        <div class="view-side"style="width: 240px;float: right;">
            <div class="side-relations" style="height: 240px;width: 240px">
                <div class="relation-one">
                    <div class="des" style="width: 240px;height: 20px"><p style="font-size: 16px">相关目的地:</p></div>
                    <div class="des-mainpicture" style="height:240px;height: 160px;margin-top: 20px"><img src="http://t1-q.mafengwo.net/s11/M00/0E/4D/wKgBEFtnj-GAXD7yACDGmniBqEQ80.jpeg?imageMogr2%2Fthumbnail%2F%21305x183r%2Fgravity%2FCenter%2Fcrop%2F%21305x183%2Fquality%2F100" style="height: 100%;width: 100%"></div>
                </div>
                <div class="relation-two" style="margin-top: 20px">
                    <div class="des" style="width: 240px;height: 20px"><p style="font-size: 16px">相关景点:</p></div>
                    <div class="des-mainpicture" style="height:240px;height: 160px;margin-top: 20px"><img src="http://t1-q.mafengwo.net/s10/M00/A8/BF/wKgBZ1mbLJiAI6-9AAghkKr1SSA66.jpeg?imageMogr2%2Fthumbnail%2F%21305x183r%2Fgravity%2FCenter%2Fcrop%2F%21305x183%2Fquality%2F100" style="height: 100%;width: 100%"></div>
                </div>
                <div class="relation-three" style="margin-top: 20px">
                    <div class="des" style="width: 240px;height: 20px"><p style="font-size: 16px">相关游记:</p></div>
                    <div class="des-mainpicture" style="height:240px;height: 160px;margin-top: 20px"><img src="http://t1-q.mafengwo.net/s12/M00/2F/1F/wKgED1u4MXCAYBS5AAvz2YbZ9Y061.jpeg?imageMogr2%2Fthumbnail%2F%21690x370r%2Fgravity%2FCenter%2Fcrop%2F%21690x370%2Fquality%2F100" style="height: 100%;width: 100%"></div>
                </div>

            </div>
            <div class="side-relations" style="height: 240px;width: 240px"></div>
            <div class="side-relations" style="height: 240px;width: 240px"></div>
        </div>
    </div>
</div>
</body>
<script>
    var custId = '${loginCustomer.custId}';
    var notesId ='${response.data.travelNotesId}'
    var cId = '${cust.custId}'
    $(".submit-review").click(function (){
        var text = $(".text-area").val();
        var url = "${pageContext.request.contextPath}/travelnote/review/go/"+notesId;
        $.post(
            url,
            {
            "custId":custId,
            "text":text
            },
            function (result){
                console.log(111)
                console.log(result)
                window.location.reload();
            },
            "json"
        )
        $(".text-area").val("");
    })
</script>
</html>
